<template>
	<view>
		<view class="place-box">
			<view class="hed">
				选择甲型
				<view class="close" @tap="sizeSlose"><image src="../static/x.png" class="xw"></image></view>
			</view>
			<view class="list">
				<view class="item" v-for="item in typeList" :key="item.id" @tap="type(item)" :class="ckType == item.id?'active':''">
					<image class="img" :src="item.url"></image>
					<text class="txt">{{item.shape}}</text>
				</view>
			</view>
			<view class="hed mt">
				选择大小
			</view>
			<view class="size-list">
				<view class="item" v-for="(i,index) in sizeList" :key="index" :class="sSize == i.size?'active':''" @tap="size(i,index)">{{i.size}}号</view>
			</view>
			<view class="m-bnt" @tap="typeSizeSave">
				确定
			</view>
		</view>
		<!--地址弹窗-->
		<uni-popup ref="popupAddr" background-color="#F3ECEF" @change="change" :is-mask-click="false">
			<view class="popup-content">
				<view class="addr-list">
					<view class="hed">
						选择收获地址<view class="close" @tap="addrClose"><image src="../static/x.png" class="xw"></image></view>
					</view>
					<view class="item" v-for="item in addrList" :key="item.id" @tap="addrs(item)">
						<view class="title">
							{{item.tele}}
						</view>
						<view class="desc">
							{{item.province}}{{item.city}}{{item.district}}{{item.address}}
						</view>
						<image v-show="addrIndex == item.id" src="../static/check-pay.png" class="check" mode=""></image>
					</view>
					<view class="addr-add-box" v-if="!addrShow" @tap="addrShow = true">
						新增地址
					</view>
					<view class="t-bnt" v-if="!addrShow" @tap="addrSave">
						确定
					</view>
				</view>
				<view class="addr-model" v-if="addrShow">
					<view class="hed">
						<text class="rad"></text>新增地址信息
					</view>
					<view class="v-list">
						<view class="item">
							<view class="left-name">姓名</view>
							<view class="rcont"><input class="uni-input" v-model="form.userName" placeholder="请输入姓名" /></view>
						</view>
						<view class="item">
							<view class="left-name">所在地区</view>
							<view class="rcont">
								<!-- <input class="uni-input" placeholder="请输入所在地区" /> -->
								<!-- <pickerAddress @change="change">{{txt}}</pickerAddress> -->
								<picker mode="region" :value="addrValue" @change="bindTimeChange">
									<view class="uni-input">{{addr}}</view>
								</picker>
							</view>
						</view>
						<view class="item">
							<view class="left-name">详细地址</view>
							<!-- <view class="rcont"><input class="uni-input" placeholder="请输入详细地址" /></view> -->
						</view>
						<view class="item">
							<view class="rcont" style="text-align: left;"><textarea style="height: 80rpx;" class="uni-input" v-model="form.address" placeholder="请输入详细地址" /></view>
						</view>
						<view class="item">
							<view class="left-name">手机号码</view>
							<view class="rcont"><input class="uni-input" v-model="form.tele" placeholder="请输入手机号码" /></view>
						</view>
						<view class="item">
							<view class="left-name">邮编</view>
							<view class="rcont"><input class="uni-input" v-model="form.zip" placeholder="请输入邮编" /></view>
						</view>
					</view>
					<view class="bntx">
						<view class="c" @tap="addrShow = false">
							取消
						</view>
						<view class="s" @tap="save">
							确定
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!--绑定手机号-->
		<!-- <uni-popup ref="popupPhone" style="width: 640rpx;" background-color="#F3ECEF" @change="changePhone" :is-mask-click="true"> -->
		<view class="mask" v-if="bindPhoneShow" @tap="bindPhoneShow = false"></view>
		<view class="phone-box" v-if="bindPhoneShow">
			<bindPhone @EventConfirm="confirmEvent"/>
		</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	import { getNailShape, getNailSize, getQuerySubjectInfo,userCollectSubject,addUserAddr,getUserAddr,verfiyCode } from '@/api/user.js'
	import bindPhone from '@/components/bindPhone.vue'
	export default {
		name:'TypeSize',
		components: {
			bindPhone
		},
		data() {
			return {
				typeList:[],
				ckType: '',
				sizeList:[],
				sSize: '',
				form: {
					address: '',
					city: '',
					province: '',
					district: '',
					tele: '',
					zip: '',
					isDefault: 0,
					userName: ''
				},
				addrList: [],
				addrIndex: '',
				txt: '选择地址',
				addr: '选择地址',
				addrValue: '',
				addrShow: false,
				bindPhoneShow: false
			};
		},
		mounted() {
			this.getNailShapeFn()
			this.getNailSizeFn()
		},
		methods:{
			changePhone(){
				
			},
			change(data) {
				this.txt = data.data ? data.data.join('-') : ''
			},
			sizeSlose(){
				this.$emit('saveValue','')
			},
			addrs(item){
				this.addrIndex = item.id
				// this.params.addrId = item.id
			},
			close(){
				this.addrShow = false
				this.$refs.popupAddr.close()
				// this.$refs.popupPhone.close()
			},
			confirmEvent(t){
				console.log('call绑定手机回调')
				this.bindPhoneShow = false
			},
			// 用户地址
			getUserAddrFn(){
				getUserAddr().then((res) => {
					this.addrList = res
				})
			},
			// 添加地址
			save(){
				if(!this.form.userName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return
				}
				if(!this.form.city) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					})
					return
				}
				if(!this.form.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.tele))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				addUserAddr(this.form).then((res) => {
					this.addrShow = false
					this.getUserAddrFn()
				})
			},
			addrSave(){
				if(!this.addrIndex) {
					uni.showToast({title: '请选择地址',icon:"none"});
					return false; 
				}
				this.$refs.popupAddr.close()
				this.$emit('saveValue',{size:this.sSize,type:this.ckType,addrId:this.addrIndex})
				this.addrIndex = ''
			},
			goPay(){
				let authData = uni.getStorageSync('userInfo') || {}
				// 是否绑定过手机 authStatus 1 已实名  2 未实名
				// if(authData.authStatus == 2) {
				// 	// this.$refs.popupPhone.open('top')
				// 	this.bindPhoneShow = true
				// 	return
				// }
				
				if(!this.addrIndex){
					this.getUserAddrFn()
					this.$refs.popupAddr.open('bottom')
				}else{
					this.$refs.popupAddr.close()
					this.$emit('saveValue',{size:this.sSize,type:this.ckType,addrId:this.addrIndex})
					this.addrIndex = ''
				}
			},
			addrClose(){
				this.$refs.popupAddr.close()
			},
			bindTimeChange(e){
				console.log(e.detail)
				this.form.province = e.detail.value[0]
				this.form.city = e.detail.value[1]
				this.form.district = e.detail.value[2]
				this.addrValue = e.detail.code
				this.addr = e.detail.value ? e.detail.value.join('-') : ''
			},
			// 指甲类型
			getNailShapeFn(){
				let data = uni.getStorageSync('nailShape') || ''
				if(data) {
					this.typeList = data
					return
				}
				getNailShape().then((res) => {
					uni.setStorageSync('nailShape',res)
					this.typeList = res
				})
			},
			// 指甲类型大小
			getNailSizeFn(size){
				let data = uni.getStorageSync('sizeArr') || ''
				if(data) {
					this.sizeList = data
					return
				}
				getNailSize().then((res) => {
					uni.setStorageSync('sizeArr',res)
					this.sizeList = res
				})
			},
			typeSizeSave(){
				if(!this.ckType){
					uni.showToast({title: '选择甲型',icon:"none"});
					return false; 
				}
				if(!this.sSize){
					uni.showToast({title: '选择大小',icon:"none"});
					return false; 
				}
				this.goPay()
				// this.$emit('saveValue',{size:this.sSize,type:this.ckType})
			},
			type(item){
				this.ckType = item.id
				// this.getNailSizeFn()
			},
			size(i,index){
				this.sSize = i.size
			},
		}
	}
</script>

<style lang="less" scoped>
.place-box{
	font-size: 32rpx;
	color: #3D3D3D;
	background-color: #f3ecef;
	padding: 34rpx;
	border-radius: 40rpx 40rpx 0px 0px;
	.close{
		float: right;
		.xw{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.mt{
		margin-top: 32rpx;
	}
	.list{
		margin-top: 32rpx;
		.item{
			width: 92rpx;
			height: 220rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			color: #3D3D3D;
			text-align: center;
			display: inline-block;
			margin-right: 55rpx;
			margin-bottom: 20rpx;
		}
		.item:last-child{
			margin-right: 0;
		}
		.img{
			width: 72rpx;
			height: 126rpx;
			margin-top: 30rpx;
		}
		.txt{
			font-size: 28rpx;
		}
		.active{
			color: #E4919D;
		}
	}
	.size-list{
		margin-top: 24rpx;
		.item{
			font-size: 28rpx;
			color: #3D3D3D;
			width: 117rpx;
			height: 68rpx;
			border-radius: 192rpx;
			background-color: #fff;
			text-align: center;
			line-height: 68rpx;
			border: 2rpx solid #fff;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			display: inline-block;
		}
		.item:nth-child(5){
			margin-right: 0;
		}
		.active{
			border: 2rpx solid #E4919D;
			color: #E4919D;
		}
	}
	.m-bnt{
		height: 98rpx;
		line-height: 98rpx;
		border-radius: 50rpx;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		background: #E4919D;
		margin-top: 62rpx;
		margin-bottom: 32rpx;
	}
}
.popup-content{
	border-radius: 24rpx;
}
.addr-add-box{
	text-align: center;
	padding: 15rpx;
	font-size: 25rpx;
}
.addr-list{
	padding: 0 20rpx;
	.hed{
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		padding-top: 15rpx;
	}
	.close{
		float: right;
	}
	.xw{
		width: 28rpx;
		height: 28rpx;
	}
	.title{
		font-size: 28rpx;
		color: #333;
	}
	.desc{
		margin-top: 6rpx;
		color: #999;
		font-size: 24rpx;
	}
	padding-top: 20rpx;
	.item{
		margin-bottom: 18rpx;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;
		position: relative;
	}
	.check{
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 35rpx;
		height: 35rpx;
	}
}
.addr-model{
	width: 640rpx;
	min-height: 784rpx;
	border-radius: 24rpx;
	background: #F3ECEF;
	box-shadow: 0px 8rpx 20rpx 0px rgba(235, 141, 167, 0.35);
	// position: absolute;
	// left: 50%;
	// top: 15%;
	// margin-left: -320rpx;
	margin: 0 auto;
	margin-bottom: 50rpx;
	padding: 15rpx;
	.hed{
		font-size: 28rpx;
		color: #AAAAAA;
		margin: 32rpx;
		margin-bottom: 50rpx;
		.close{
			float: right;
		}
		.xw{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.rad{
		width: 29rpx;
		height: 29rpx;
		border: 1rpx solid #AAAAAA;
		display: inline-block;
		border-radius: 50%;
		margin-right: 12rpx;
		position: relative;
		top: 7rpx;
	}
	.v-list{
		margin: 32rpx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			border-bottom: rgba(170, 170, 170, 0.2) 1rpx solid;
			padding-bottom: 30rpx;
			font-size: 24rpx;
		}
		.left-name{
			width: 180rpx;
		}
		.rcont{
			flex: 1;
			text-align: right;
			input,textarea{
				font-size: 25rpx
			}
		}
		.fcode{
			display: flex;
			align-items: center;
		}
		.finput{
			flex: 1;
			margin-right: 50rpx;
		}
		.get-code{
			background-color: #666;
			border-radius: 25rpx;
			color: #fff;
			width: 170rpx;
			text-align: center;
			padding: 12rpx 0;
		}
	}
	.bntx{
		.c,.s{
			display: inline-block;
			width: 50%;
			font-size: 34rpx;
			color: #AAAAAA;
			text-align: center;
			padding: 15rpx 0;
		}
		.s{
			color: #E4919D;
		}
	}
}
.t-bnt{
	width: 320rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	background: #E4919D;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	margin: 45rpx auto;
}
.phone-box{
	width: 640rpx;
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -320rpx;
	z-index: 101;
}
.mask{
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 98;
	border-radius: 40rpx 40rpx 0px 0px;
}
</style>
